<template>
	<div class="left-sidebar">
		<div class="sidebar-holder">
            <div class="avatar">S</div>
            <div class="user-info">
                <div class="welcome">Welcome</div>
                <div class="username">Spring</div>
                <div class="userinfo">Spring is lazy girl,nothing...</div>
            </div>
            <div class="user-status">
                <i class="fa fa-circle "></i>
            </div>
        </div>
        <aside class="menu">
            <div class="menu-container" v-for="(items,x) in munelists">
                <p class="menu-label">
                    <i :class="'menu-icon fa fa-'+items.icons"></i>
                    <span v-text="items.title"></span>
                </p>
                <ul class="mune-list">
                    <li v-for="(item,y) in items.sub">
                        <router-link v-if="!item.sub" :to="item.url">
                           <i :class="'fa fa-'+item.icon"></i>
                           <span v-text="item.title"></span>
                        </router-link>
                       <a v-if="item.sub" :class="{'menu-toggle':(x+'.'+y) == indexs}" @click="toggle(x+'.'+y)">
                           <span class="icon is-small">
                               <i :class="'fa fa-'+item.icon"></i>
                           </span>
                           <span v-text="item.title"></span>
                           <span class="icon is-small is-angle">
                               <i class="fa fa-angle-down"></i>
                           </span>
                       </a>
                       <div v-if="item.sub" class="menu-subcontainer" :style="{ height:(indexs ? item.sub.length*30 : 0 )+ 'px' }">
                           <ul>
                               <li v-for="it in item.sub">
                                   <router-link :to="it.url">
                                      <i :class="'fa fa-'+it.icon"></i>
                                      <span>{{it.title}}</span>
                                   </router-link>
                               </li>
                           </ul>
                       </div>
                    </li>
                </ul>
            </div>
        </aside>
	</div>
</template>
<script>
	export default {
        data(){
            return {
                munelists:[
                    {
                        title:"系统",
                        icons:"cogs",
                        sub:[
                            {title:"设置",icon:"dashboard",url:"/setting"}
                        ]
                    },
                    {
                        title:"功能",
                        icons:"th",
                        sub:[
                            {title: '简单计数器', icon: 'home', url: '/'},
                            {title: '景点', icon: 'home', url: '/scenicspot'},
                            {
                              title: 'Vuex Example',
                              icon: 'diamond',
                              sub: [
                                {title: '购物车', icon: 'caret-right', url: '/shop'}
                              ]
                            },
                            {title: '关于', icon: 'cube', url: '/about'}
                        ]
                    }
                ],
                indexs:''
            }
        },
        methods:{
            toggle(index) {
                this.indexs = (this.indexs ===  index) ? '' : index
            },
            logout(){
                alert("logout");
            }
        }

	}
</script>
<style>
.box-holder{position: relative;}
.left-sidebar{position:absolute;width:200px; bottom: 0;top: 0;background-color: rgb(255, 255, 255); box-shadow: rgba(0, 0, 0, 0.2) 1px 0px 1px;}
.sidebar-holder{padding: 10px;    box-shadow: rgba(0, 0, 0, 0.117647) 0px 1px 0px;}
.avatar,.user-info,.user-status{display: inline-block;vertical-align: top;}
.avatar{width: 50px;height: 50px;border-radius: 25px;background:rgba(0, 151, 129,.7);line-height: 50px;font-size: 22px;font-weight: 600;color: #fff;text-align: center; }
.user-info{width: 100px;}
.user-info div{line-height: 25px;font-size: 14px;}
div.welcome{font-style: italic;font-size: 12px;}
.user-status {color: #f00;padding-top: 30px;}
.nav-list>li>a>.menu-icon {display: inline-block; min-width: 30px; margin-right: 2px; vertical-align: sub; text-align: center; font-size: 18px; font-weight: 400; } 
.menu{padding:10px;}
.menu-label {color: #7a7a7a; font-size: 11px; margin-bottom: 5px;
}
aside.menu .menu-label {font-weight: 700; }
.icon.is-small {font-size: 14px; height: 16px; line-height: 16px; width: 16px; }
ul{list-style: none;padding: 0;margin: 0;}
.mune-list a{  border-radius: 2px;text-decoration: none;
    color: #4a4a4a;
    display: block;
    padding: 5px 10px;font-size: 14px;}
.mune-list a:hover{
    background: #eee;
    color: #00d1b2;
}
.is-active{
    background:#00d1b2;
    color: #fff;
}
.is-angle{float: right;}
.menu-subcontainer ul{
    margin: 0 0px 0 18px; 
    padding-left: 10px;   
    border-left:1px #ccc solid;
}
.menu-subcontainer{
    overflow: hidden;
    transition: all .3s;
}
section.menu a .icon {
  vertical-align: baseline;
  margin-right:5px;
}
aside.menu .icon.is-angle {
  transition: transform .3s ease;
  text-align: center;
}
.menu-toggle .is-angle{
    transform: rotate(180deg);
}
</style>